﻿@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.TablesModel
@{
    ViewData["Title"] = "Tables";
}

@section styles {
    <abp-style-bundle>
        <abp-style src="/css/demo.css" />
    </abp-style-bundle>
}

@section scripts {
    <abp-script-bundle>
        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
            <abp-script src="/Pages/Components/highlightCode.js" />*@
    </abp-script-bundle>
}

<link rel="stylesheet"
      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>


<h2>Tables</h2>

<p>Based on <a href="https://getbootstrap.com/docs/4.1/content/tables/" target="_blank"> Bootstrap Tables</a>.</p>

<h4>Examples</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-table hoverable-rows="true" responsive-sm="true">
            <thead>
                <tr>
                    <th scope="Column">#</th>
                    <th scope="Column">First</th>
                    <th scope="Column">Last</th>
                    <th scope="Column">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="Row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td table-style="Danger">mdo</td>
                </tr>
                <tr table-style="Warning">
                    <th scope="Row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>fat</td>
                </tr>
                <tr>
                    <th scope="Row">3</th>
                    <td table-style="Success">Larry</td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
            </tbody>
        </abp-table>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper" active="true">
                <pre><code>
&lt;abp-table hoverable-rows=&quot;true&quot; responsive-sm=&quot;true&quot;&gt;
    &lt;thead&gt;
    &lt;tr&gt;
        &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
        &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
        &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
        &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
        &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
        &lt;td&gt;Mark&lt;/td&gt;
        &lt;td&gt;Otto&lt;/td&gt;
        &lt;td table-style=&quot;Danger&quot;&gt;mdo&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr table-style=&quot;Warning&quot;&gt;
        &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
        &lt;td&gt;Jacob&lt;/td&gt;
        &lt;td&gt;Thornton&lt;/td&gt;
        &lt;td&gt;fat&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
        &lt;td table-style=&quot;Success&quot;&gt;Larry&lt;/td&gt;
        &lt;td&gt;the Bird&lt;/td&gt;
        &lt;td&gt;twitter&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/abp-table&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;table-responsive-sm&quot;&gt;
       &lt;table class=&quot;table table-hover&quot;&gt;
            &lt;thead&gt;
            &lt;tr&gt;
                &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
            &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
            &lt;tr&gt;
                &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
                &lt;td&gt;Mark&lt;/td&gt;
                &lt;td&gt;Otto&lt;/td&gt;
                &lt;td class=&quot;table-danger&quot;&gt;mdo&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class=&quot;table-warning&quot;&gt;
                &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
                &lt;td&gt;Jacob&lt;/td&gt;
                &lt;td&gt;Thornton&lt;/td&gt;
                &lt;td&gt;fat&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
                &lt;td class=&quot;table-success&quot;&gt;Larry&lt;/td&gt;
                &lt;td&gt;the Bird&lt;/td&gt;
                &lt;td&gt;twitter&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/tbody&gt;
       &lt;/table&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-table small="true" striped-rows="true" border-style="Bordered">
            <thead Theme="Dark">
                <tr>
                    <th scope="Column">#</th>
                    <th scope="Column">First</th>
                    <th scope="Column">Last</th>
                    <th scope="Column">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="Row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>mdo</td>
                </tr>
                <tr>
                    <th scope="Row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>fat</td>
                </tr>
                <tr>
                    <th scope="Row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
            </tbody>
        </abp-table>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper" active="true">
                <pre><code>
&lt;abp-table small=&quot;true&quot; striped-rows=&quot;true&quot; border-style=&quot;Bordered&quot;&gt;
    &lt;thead Theme=&quot;Dark&quot;&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
            &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
            &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
            &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
            &lt;td&gt;Mark&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
            &lt;td&gt;mdo&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
            &lt;td&gt;Jacob&lt;/td&gt;
            &lt;td&gt;Thornton&lt;/td&gt;
            &lt;td&gt;fat&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
            &lt;td&gt;Larry&lt;/td&gt;
            &lt;td&gt;the Bird&lt;/td&gt;
            &lt;td&gt;twitter&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/abp-table&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;table class=&quot;table table-sm table-striped table-bordered&quot;&gt;
    &lt;thead class=&quot;thead-dark&quot;&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
            &lt;td&gt;Mark&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
            &lt;td&gt;mdo&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
            &lt;td&gt;Jacob&lt;/td&gt;
            &lt;td&gt;Thornton&lt;/td&gt;
            &lt;td&gt;fat&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
            &lt;td&gt;Larry&lt;/td&gt;
            &lt;td&gt;the Bird&lt;/td&gt;
            &lt;td&gt;twitter&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-table striped-rows="true" dark-theme="true">
            <caption>List of users</caption>
            <thead>
                <tr>
                    <th scope="Column">#</th>
                    <th scope="Column">First</th>
                    <th scope="Column">Last</th>
                    <th scope="Column">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="Row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>mdo</td>
                </tr>
                <tr>
                    <th scope="Row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>fat</td>
                </tr>
                <tr>
                    <th scope="Row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
            </tbody>
        </abp-table>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper" active="true">
                <pre><code>
&lt;abp-table striped-rows=&quot;true&quot; dark-theme=&quot;true&quot;&gt;
    &lt;caption&gt;List of users&lt;/caption&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
            &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
            &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
            &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
            &lt;td&gt;Mark&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
            &lt;td&gt;mdo&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
            &lt;td&gt;Jacob&lt;/td&gt;
            &lt;td&gt;Thornton&lt;/td&gt;
            &lt;td&gt;fat&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
            &lt;td&gt;Larry&lt;/td&gt;
            &lt;td&gt;the Bird&lt;/td&gt;
            &lt;td&gt;twitter&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/abp-table&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;table class=&quot;table table-dark table-striped&quot;&gt;
    &lt;caption&gt;List of users&lt;/caption&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
            &lt;td&gt;Mark&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
            &lt;td&gt;mdo&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
            &lt;td&gt;Jacob&lt;/td&gt;
            &lt;td&gt;Thornton&lt;/td&gt;
            &lt;td&gt;fat&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
            &lt;td&gt;Larry&lt;/td&gt;
            &lt;td&gt;the Bird&lt;/td&gt;
            &lt;td&gt;twitter&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>


<div class="demo-with-code">
    <div class="demo-area">

        <abp-table border-style="Borderless">
            <thead>
                <tr>
                    <th scope="Column">#</th>
                    <th scope="Column">First</th>
                    <th scope="Column">Last</th>
                    <th scope="Column">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="Row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>mdo</td>
                </tr>
                <tr>
                    <th scope="Row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>fat</td>
                </tr>
                <tr>
                    <th scope="Row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
            </tbody>
        </abp-table>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper" active="true">
                <pre><code>
&lt;abp-table border-style=&quot;Borderless&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
            &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
            &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
            &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
            &lt;td&gt;Mark&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
            &lt;td&gt;mdo&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
            &lt;td&gt;Jacob&lt;/td&gt;
            &lt;td&gt;Thornton&lt;/td&gt;
            &lt;td&gt;fat&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
            &lt;td&gt;Larry&lt;/td&gt;
            &lt;td&gt;the Bird&lt;/td&gt;
            &lt;td&gt;twitter&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/abp-table&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;table class=&quot;table table-borderless&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
            &lt;td&gt;Mark&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
            &lt;td&gt;mdo&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
            &lt;td&gt;Jacob&lt;/td&gt;
            &lt;td&gt;Thornton&lt;/td&gt;
            &lt;td&gt;fat&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
            &lt;td&gt;Larry&lt;/td&gt;
            &lt;td&gt;the Bird&lt;/td&gt;
            &lt;td&gt;twitter&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>
